<template>
	<view class="page bgf8" :style="{'--color': color}">
		<status-bar title='订单详情'></status-bar>
		<view class="padding20">
			<view class="card" v-if="pageData.table_code_name">
				<view class="size32 black bold">桌号：{{ pageData.table_code_name || '' }}</view>
				<view class="size32 black bold m-top10" v-if="pageData.siteName">宴会名称：{{ pageData.siteName }}</view>
				<view class="size32 black bold m-top10" v-if="pageData.open_date">开宴时间：{{ pageData.open_date }}</view>
			</view>
		</view>
		<view class="p-left20 p-right20">
			<view class="goodsList card">
				<view class="d-flex j-sb a-center p-bot10">
					<view class="size30 black bold">{{ pageData.shopName }}</view>
					<text class="iconfont icon-dingwei size40" :style="{color}" @click="locate"></text>
				</view>
				<view class="d-flex m-top20" v-for="(item,index) in pageData.goodsData" :key="index">
					<image class="thumb bor_radius_4" :src="$imgUrls(item.goods_img)" mode="aspectFill"></image>
					<view class="flex-1 d-flex f-column j-sb p-left20">
						<view class="size28 color_33 ellipsis">{{item.goods_name}}</view>
						<view class="h7 color_99 ellipsis">{{item.specs_bind_text}}</view>
						<view class="d-flex j-sb a-center">
							<view class="color_E9">
								<text class="h7">￥</text>
								<text class="size28">{{item.price}}</text>
							</view>
							<!-- 预付单-未支付 -->
							<view class="d-flex a-center" v-if="startUp.table_pay_type == 1 && pageData.state == 0">
								<text class="iconfont icon-jianshao1 size36 thmeColor"
									@click="editOrder(item, item.goods_num - 1)"></text>
								<view class="amount h6 color_33 text-center">{{item.goods_num}}</view>
								<text class="iconfont icon-zengjia size36 thmeColor"
									@click="editOrder(item, item.goods_num + 1)"></text>
							</view>
							<view class="h6 color_99" v-else>x {{item.goods_num}}</view>
						</view>
					</view>
				</view>
				<!-- 店铺活动 -->
				<view class="d-flex a-center m-top30" v-if="pageData.act_money > 0">
					<view class="flex-1 size28 ellipsis m-right20">{{pageData.usedActTitle}}<text
							class="h6 color_66 m-left10">({{pageData.act_title}})</text></view>
					<view class="size32 color_E9">-￥{{pageData.act_money}}</view>
				</view>
				<!-- 会员折扣 -->
				<view class="d-flex a-center m-top30" v-if="pageData.vip_money > 0">
					<view class="flex-1 size28 ellipsis m-right20">{{pageData.vipActTitle}}<text
							class="h6 color_66 m-left10">({{pageData.vip_title}})</text></view>
					<view class="size32 color_E9">-￥{{pageData.vip_money}}</view>
				</view>
				<!-- 优惠券 -->
				<view class="d-flex a-center m-top30" v-if="pageData.dis_money > 0">
					<view class="flex-1 size28 ellipsis m-right20">优惠券<text
							class="h6 color_66 m-left10">({{pageData.dis_title}})</text></view>
					<view class="size32 color_E9">-￥{{pageData.dis_money}}</view>
				</view>
				<!-- 积分 -->
				<view class="d-flex j-sb a-center m-top30" v-if="pageData.fen_to_money > 0">
					<view class="size28">积分抵扣<text class="h6 color_66 m-left10">(使用{{pageData.used_fen}}积分)</text>
					</view>
					<view class="size32 color_E9">-￥{{pageData.fen_to_money}}</view>
				</view>
				<view class="d-flex j-end a-center p-top60 bold">
					<view class="size26" v-if="pageData.allDiscount">已优惠</view>
					<view class="size32 color_E9" v-if="pageData.allDiscount">-￥{{ pageData.allDiscount || '0.0' }}
					</view>
					<view class="size26 m-left20 m-right20">共{{parseInt(pageData.num) || ''}}件</view>
					<view class="size26">合计</view>
					<view class="size26 color_E9">￥</view>
					<view class="size42 color_E9" v-if="parseFloat(pageData.payment) > 0">{{pageData.payment}}</view>
					<view class="size42 color_E9" v-else>{{pageData.used_balance || ''}}</view>
				</view>
			</view>
		</view>
		<view class="padding20">
			<view class="card">
				<view class="size30 black bold m-bot30">订单信息</view>
				<view class="d-flex j-sb a-center m-bot20">
					<view class="color_66">订单编号</view>
					<view v-if="pageData.order_code">
						<text>{{ pageData.order_code }}</text>
						<text class="m-left20" :style="{color}" @click="$pop.setClip(pageData.order_code)">复制</text>
					</view>
				</view>
				<view class="d-flex j-sb a-center m-bot20">
					<view class="color_66">下单时间</view>
					<view v-if="add_time">{{ add_time }}</view>
				</view>
				<view class="d-flex j-sb a-center">
					<view class="color_66">备注信息</view>
					<view>{{ pageData.remarks || '无' }}</view>
				</view>
				<view class="d-flex j-sb a-center m-top20" v-if="pay_time">
					<view class="color_66">支付时间</view>
					<view v-if="pay_time">{{ pay_time }}</view>
				</view>
			</view>
		</view>
		<view class="footer_info j-se" v-if="pageData.state == 0 || pageData.state == 4">
			<view class="btn flexac size28 color_99" @click="toUrl('/otherPage/custom/placeOrder?tid=' + tid)"
				v-if="pageData.state == 0">添加商品</view>
			<view class="btn flexac size28 white" @click="paySure" v-if="pageData.state == 0">去结算</view>
			<view class="btn flexac size28 white" @click="toUrl('/commentPage/comment/commentGoods?oid='+order_id)"
				v-if="pageData.state == 4">立即评价</view>
		</view>

		<showModel type="99" v-if="showTip" title="提示" msg="当前订单已删除" btn2="返回" @certain="$back()"></showModel>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				order_id: '',
				pageData: '',
				add_time: '',
				pay_time: '',
				tid: '',
				showTip: false
			}
		},
		computed: {
			...mapState(['color', 'startUp']),
		},
		onLoad(e) {
			if (e.order_id) this.order_id = e.order_id
			if (e.tid) this.tid = e.tid
		},
		onShow() {
			this.getDetail()
		},
		methods: {
			getDetail() {
				this.$http.post({
					url: '/zzj_singleSaleApi/orderSingleDetails',
					data: {
						order_id: this.order_id,
						tid: this.tid
					}
				}).then(res => {
					this.pageData = res.data || ''
					this.showTip = this.pageData.state == 99 ? true : false
					this.add_time = this.$common.timeFormat(this.pageData.add_time, 'Y-M-D h:m:s')
					if (!this.pageData.pay_time) return
					this.pay_time = this.$common.timeFormat(this.pageData.pay_time, 'Y-M-D h:m:s')
				})
			},
			editOrder(item, num) { // 维护订单商品数量
				this.$http.post({
					url: '/maintainOrdersGoodsApi/editOrderInfo',
					data: {
						order_id: this.order_id,
						goods_id: item.goods_id,
						specs_bind_id: item.specs_bind_id,
						num
					}
				}).then(res => {
					if (res.code != 100) return this.$Toast(res.msg)
					this.getDetail()
				})
			},
			locate() {
				uni.openLocation({
					longitude: parseFloat(this.pageData.shopPointx), // 经度
					latitude: parseFloat(this.pageData.shopPointy), // 纬度
					name: this.pageData.shopName,
					address: this.pageData.shopAdress,
					complete(res) {
						console.log(res)
					}
				})
			},
			paySure() {
				if (this.pageData.payID) {
					// #ifdef H5
					window.location.href = 'https://sra.mogoie.com/index.php/accountPay/weChatCashierPage?orderStr=' + res
						.payID
					// #endif
					// #ifndef H5
					this.toUrl('/moneyPage/capital/checkstand?payid=' + this.pageData.payID + '&path=1')
					// #endif
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding-bottom: calc(130rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(130rpx + env(safe-area-inset-bottom));
	}

	.card {
		box-shadow: 0 2px 4px rgba(0, 0, 0, .06);
		border-radius: 20rpx;
		background: #fff;
		padding: 30rpx;
	}

	.goodsList {
		.thumb {
			width: 120rpx;
			height: 120rpx;
			border: 1px solid #ddd;
		}

		.amount {
			width: 60rpx;
		}
	}

	.footer_info {
		padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
		padding-top: 30rpx;

		.btn {
			width: 230rpx;
			height: 70rpx;
			border-radius: 10rpx;

			&:first-child {
				border: 2rpx solid #ddd;
			}

			&:last-child {
				background: var(--color);
			}
		}
	}
</style>